// 默认显示第一个tab
document.getElementById("tab1").style.display = "block";
document.getElementsByClassName("tablinks")[0].classList.add("active");

function openTab(evt, tabName) {
  // 获取所有tab的内容和按钮元素
  var tabcontent = document.getElementsByClassName("tabcontent");
  var tablinks = document.getElementsByClassName("tablinks");

  // 隐藏所有tab的内容
  for (var i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // 取消所有按钮的active状态
  for (var i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }

  // 显示当前tab的内容
  document.getElementById(tabName).style.display = "block";

  // 给当前按钮添加active状态
  evt.currentTarget.classList.add("active");
}

// Tab 1
var tab1List = document.getElementById("tab1-list");

function addTab1() {
  var inputValue = document.getElementById("tab1-input").value;
  var li = document.createElement("li");
  var text = document.createTextNode(inputValue);
  li.appendChild(text);
  tab1List.appendChild(li);
  document.getElementById("tab1-input").value = "";
}

function updateTab1() {
  // todo
}

function deleteTab1() {
var lis = tab1List.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
if (lis[i].classList.contains("selected")) {
lis[i].parentNode.removeChild(lis[i]);
}
}
}

tab1List.addEventListener("click", function(e) {
if (e.target.tagName === "LI") {
if (e.target.classList.contains("selected")) {
e.target.classList.remove("selected");
} else {
e.target.classList.add("selected");
}
}
});

// Tab 2
var tab2List = document.getElementById("tab2-list");

function addTab2() {
var inputValue = document.getElementById("tab2-input").value;
var li = document.createElement("li");
var text = document.createTextNode(inputValue);
li.appendChild(text);
tab2List.appendChild(li);
document.getElementById("tab2-input").value = "";
}

function updateTab2() {
// todo
}

function deleteTab2() {
var lis = tab2List.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
if (lis[i].classList.contains("selected")) {
lis[i].parentNode.removeChild(lis[i]);
}
}
}

tab2List.addEventListener("click", function(e) {
if (e.target.tagName === "LI") {
if (e.target.classList.contains("selected")) {
e.target.classList.remove("selected");
} else {
e.target.classList.add("selected");
}
}
});

// Tab 3
var tab3List = document.getElementById("tab3-list");

function addTab3() {
var inputValue = document.getElementById("tab3-input").value;
var li = document.createElement("li");
var text = document.createTextNode(inputValue);
li.appendChild(text);
tab3List.appendChild(li);
document.getElementById("tab3-input").value = "";
}

function updateTab3() {
// todo
}

function deleteTab3() {
var lis = tab3List.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
if (lis[i].classList.contains("selected")) {
lis[i].parentNode.removeChild(lis[i]);
}
}
}

tab3List.addEventListener("click", function(e) {
if (e.target.tagName === "LI") {
if (e.target.classList.contains("selected")) {
e.target.classList.remove("selected");
} else {
e.target.classList.add("selected");
}
}
});
